<section class="activity-heatmap">
  <div class="heatmap-header">
    <h1 class="heatmap-title">{{ T.F.METRIC.CMP.ACTIVITY_HEATMAP | translate }}</h1>
    <div class="heatmap-header__actions">
      @if (heatmapData()) {
        <button
          mat-icon-button
          (click)="shareHeatmap()"
          [disabled]="isSharing()"
          [matTooltip]="'Share Heatmap' | translate"
        >
          @if (isSharing()) {
            <mat-icon>hourglass_empty</mat-icon>
          } @else {
            <mat-icon>share</mat-icon>
          }
        </button>
      }
    </div>
  </div>

  @if (heatmapData(); as data) {
    <div class="heatmap-container">
      <div class="heatmap-grid">
        <div class="day-labels">
          <div class="month-spacer"></div>
          @for (label of dayLabels(); track $index) {
            <div class="day-label">{{ label }}</div>
          }
        </div>

        <div class="scrollable-content">
          <div class="heatmap-months">
            @for (month of data.monthLabels; track $index) {
              <div class="month-label">{{ month }}</div>
            }
          </div>

          <div class="weeks">
            @for (week of data.weeks; track $index) {
              <div class="week">
                @for (day of week.days; track $index) {
                  <div
                    [class]="getDayClass(day)"
                    [title]="getDayTitle(day)"
                  ></div>
                }
              </div>
            }
          </div>
        </div>
      </div>

      <div class="heatmap-legend">
        <span>Less</span>
        <div class="legend-item level-0"></div>
        <div class="legend-item level-1"></div>
        <div class="legend-item level-2"></div>
        <div class="legend-item level-3"></div>
        <div class="legend-item level-4"></div>
        <span>More</span>
      </div>
    </div>
  } @else {
    <p>{{ T.F.METRIC.CMP.NO_ADDITIONAL_DATA_YET | translate }}</p>
  }
</section>
